<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <title>Zen 7.x-6.x Style Guide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="kss-assets/kss.css">
  <link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/style-guide/chroma-kss-styles.css">
<link rel="stylesheet" href="../css/style-guide/kss-only.css">

</head>
<body id="kss-node">

<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">Zen 7.x-6.x Style Guide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-sass.html">
          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-base.html">
          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-layouts.html">
          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-components.html">
          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
        </a>
                  <ul class="kss-nav__menu-child">
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-box">
                <span class="kss-nav__ref ">4.1</span
                ><span class="kss-nav__name">Box</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-clearfix">
                <span class="kss-nav__ref ">4.2</span
                ><span class="kss-nav__name">Clearfix</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-comments">
                <span class="kss-nav__ref ">4.3</span
                ><span class="kss-nav__name">Comment</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-divider">
                <span class="kss-nav__ref ">4.4</span
                ><span class="kss-nav__name">Divider</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-header">
                <span class="kss-nav__ref ">4.5</span
                ><span class="kss-nav__name">Branding header</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-hidden">
                <span class="kss-nav__ref ">4.6</span
                ><span class="kss-nav__name">Hidden</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-highlight-mark">
                <span class="kss-nav__ref ">4.7</span
                ><span class="kss-nav__name">Highlight mark</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-links">
                <span class="kss-nav__ref ">4.8</span
                ><span class="kss-nav__name">Inline links</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-sibling">
                <span class="kss-nav__ref ">4.9</span
                ><span class="kss-nav__name">Inline sibling</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-messages">
                <span class="kss-nav__ref ">4.10</span
                ><span class="kss-nav__name">Messages</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-messages--color">
                <span class="kss-nav__ref ">4.11</span
                ><span class="kss-nav__name">Message colors</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-print-none">
                <span class="kss-nav__ref ">4.12</span
                ><span class="kss-nav__name">Do not print</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-responsive-video">
                <span class="kss-nav__ref ">4.13</span
                ><span class="kss-nav__name">Responsive video</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-visually-hidden">
                <span class="kss-nav__ref ">4.14</span
                ><span class="kss-nav__name">Visually hidden</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-watermark">
                <span class="kss-nav__ref ">4.15</span
                ><span class="kss-nav__name">Watermark</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-components.html#kssref-components-wireframe">
                <span class="kss-nav__ref ">4.16</span
                ><span class="kss-nav__name">Wireframe</span>
              </a>
            </li>
                    </ul>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-navigation.html">
          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-forms.html">
          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
        </a>
              </li>
        </ul>
  </nav>
</div>
<article role="main" class="kss-main">

  
          <div id="kssref-components" class="kss-section kss-section--depth-1">
      <div class="kss-style">
                <h1 class="kss-title kss-title--level-1">
          <a class="kss-title__permalink" href="#kssref-components">
            <span class="kss-title__ref">
              4
              <span class="kss-title__permalink-hash">
                components
              </span>
            </span>
            Components
          </a>
        </h1>

                  <div class="kss-description">
            <p>Design components are reusable designs that can be applied using just the CSS
class names specified in the component.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>styles.scss</code>, line 41
        </div>
          </div>
          <section id="kssref-components-box" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-box">
            <span class="kss-title__ref">
              4.1
              <span class="kss-title__permalink-hash">
                components.box
              </span>
            </span>
            Box
          </a>
        </h2>

                  <div class="kss-description">
            <p>A simple box style.</p>
<p>A Drupal block is often styled as a box. However, this design component is
not applied to any blocks by default; it is used as an example of how to
build and document a CSS component.</p>
<p>&quot;box&quot; is the name of our component, so we define a <code>.box</code> class that we can
apply to any HTML element that needs the box styling. We also provide a
<code>%box</code> placeholder selector so that we can easily extend the basic box
component with <code>@extend %box;</code>.</p>
<p>Take a look at the source code for this component for more information about
building a good component.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <div class="box [modifier class]">
  <h2 class="box__title">Box title</h2>
  <div class="box__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

          </div>

                      <div class="kss-modifier__name kss-style">
              :hover
            </div>
            <div class="kss-modifier__description kss-style">
              The hover/focus styling.
            </div>
            <div class="kss-modifier__example">
              <div class="box pseudo-class-hover">
  <h2 class="box__title">Box title</h2>
  <div class="box__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

            </div>
                      <div class="kss-modifier__name kss-style">
              .box--highlight
            </div>
            <div class="kss-modifier__description kss-style">
              The &quot;highlight&quot; box variant.
            </div>
            <div class="kss-modifier__example">
              <div class="box box--highlight">
  <h2 class="box__title">Box title</h2>
  <div class="box__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;box [modifier class]&quot;&gt;
  &lt;h2 class=&quot;box__title&quot;&gt;Box title&lt;/h2&gt;
  &lt;div class=&quot;box__content&quot;&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/box/_box.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-clearfix" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-clearfix">
            <span class="kss-title__ref">
              4.2
              <span class="kss-title__permalink-hash">
                components.clearfix
              </span>
            </span>
            Clearfix
          </a>
        </h2>

                  <div class="kss-description">
            <p>Allows the bottom of an element to extend to the bottom of all floated child
elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div class="clearfix">
  <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;clearfix&quot;&gt;
  &lt;div style=&quot;float: left; height: 50px; width: 50%;&quot;&gt;A floated item.&lt;/div&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/clearfix/_clearfix.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-comments" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-comments">
            <span class="kss-title__ref">
              4.3
              <span class="kss-title__permalink-hash">
                components.comments
              </span>
            </span>
            Comment
          </a>
        </h2>

                  <div class="kss-description">
            <p>A single comment in a thread of comments.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <div class="comment__section">
  <article class="comment [modifier class]">
    <header>
      <p><a href="#">Jane A. User</a> replied on <time>Wed, 08/19/2015 - 17:51</time>
        <a href="#" class="comment__permalink">Permalink</a>
      </p>

      <h3 class="comment__title">
        <a href="#">The comment's title</a>
      </h3>
    </header>

    <p>Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.</p>
  </article>
</div>

          </div>

                      <div class="kss-modifier__name kss-style">
              .comment--preview
            </div>
            <div class="kss-modifier__description kss-style">
              Preview version of comment.
            </div>
            <div class="kss-modifier__example">
              <div class="comment__section">
  <article class="comment comment--preview">
    <header>
      <p><a href="#">Jane A. User</a> replied on <time>Wed, 08/19/2015 - 17:51</time>
        <a href="#" class="comment__permalink">Permalink</a>
      </p>

      <h3 class="comment__title">
        <a href="#">The comment's title</a>
      </h3>
    </header>

    <p>Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.</p>
  </article>
</div>

            </div>
                      <div class="kss-modifier__name kss-style">
              .comment--nested
            </div>
            <div class="kss-modifier__description kss-style">
              A nested comment.
            </div>
            <div class="kss-modifier__example">
              <div class="comment__section">
  <article class="comment comment--nested">
    <header>
      <p><a href="#">Jane A. User</a> replied on <time>Wed, 08/19/2015 - 17:51</time>
        <a href="#" class="comment__permalink">Permalink</a>
      </p>

      <h3 class="comment__title">
        <a href="#">The comment's title</a>
      </h3>
    </header>

    <p>Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.</p>
  </article>
</div>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;comment__section&quot;&gt;
  &lt;article class=&quot;comment [modifier class]&quot;&gt;
    &lt;header&gt;
      &lt;p&gt;&lt;a href=&quot;#&quot;&gt;Jane A. User&lt;/a&gt; replied on &lt;time&gt;Wed, 08/19/2015 - 17:51&lt;/time&gt;
        &lt;a href=&quot;#&quot; class=&quot;comment__permalink&quot;&gt;Permalink&lt;/a&gt;
      &lt;/p&gt;

      &lt;h3 class=&quot;comment__title&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;The comment&#039;s title&lt;/a&gt;
      &lt;/h3&gt;
    &lt;/header&gt;

    &lt;p&gt;Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.&lt;/p&gt;
  &lt;/article&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/comment/_comment.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-divider" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-divider">
            <span class="kss-title__ref">
              4.4
              <span class="kss-title__permalink-hash">
                components.divider
              </span>
            </span>
            Divider
          </a>
        </h2>

                  <div class="kss-description">
            <p>Can be used as an <code>&lt;hr&gt;</code>, an empty <code>&lt;div&gt;</code> or as a container.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div class="divider "></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<div class="divider ">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<hr class="divider ">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;divider &quot;&gt;&lt;/div&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;

&lt;div class=&quot;divider &quot;&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
&lt;/div&gt;

&lt;hr class=&quot;divider &quot;&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/divider/_divider.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-header" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-header">
            <span class="kss-title__ref">
              4.5
              <span class="kss-title__permalink-hash">
                components.header
              </span>
            </span>
            Branding header
          </a>
        </h2>

        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <header class="header " role="banner">
  <a href="/" title="Home" rel="home" class="header__logo">
    <img src="kss-assets/sample-inline.png" alt="Home" class="header__logo-image">
  </a>

  <div class="header__name-and-slogan">
    <h1 class="header__site-name">
      <a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
    </h1>
    <div class="header__site-slogan">Slogan</div>
  </div>

  <nav class="header__secondary-menu" role="navigation">
    <h2 class="visually-hidden">User menu</h2>
    <ul class="links inline clearfix">
      <li class="menu-2 first"><a href="/user">My account</a></li>
      <li class="menu-15 last"><a href="/user/logout">Log out</a></li>
    </ul>
  </nav>

  <div class="header__region">
    [Header region]
  </div>
</header>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;header class=&quot;header &quot; role=&quot;banner&quot;&gt;
  &lt;a href=&quot;/&quot; title=&quot;Home&quot; rel=&quot;home&quot; class=&quot;header__logo&quot;&gt;
    &lt;img src=&quot;kss-assets/sample-inline.png&quot; alt=&quot;Home&quot; class=&quot;header__logo-image&quot;&gt;
  &lt;/a&gt;

  &lt;div class=&quot;header__name-and-slogan&quot;&gt;
    &lt;h1 class=&quot;header__site-name&quot;&gt;
      &lt;a href=&quot;/&quot; title=&quot;Home&quot; class=&quot;header__site-link&quot; rel=&quot;home&quot;&gt;Site Name&lt;/a&gt;
    &lt;/h1&gt;
    &lt;div class=&quot;header__site-slogan&quot;&gt;Slogan&lt;/div&gt;
  &lt;/div&gt;

  &lt;nav class=&quot;header__secondary-menu&quot; role=&quot;navigation&quot;&gt;
    &lt;h2 class=&quot;visually-hidden&quot;&gt;User menu&lt;/h2&gt;
    &lt;ul class=&quot;links inline clearfix&quot;&gt;
      &lt;li class=&quot;menu-2 first&quot;&gt;&lt;a href=&quot;/user&quot;&gt;My account&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;menu-15 last&quot;&gt;&lt;a href=&quot;/user/logout&quot;&gt;Log out&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;

  &lt;div class=&quot;header__region&quot;&gt;
    [Header region]
  &lt;/div&gt;
&lt;/header&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/header/_header.scss</code>, line 5
        </div>
          </section>
          <section id="kssref-components-hidden" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-hidden">
            <span class="kss-title__ref">
              4.6
              <span class="kss-title__permalink-hash">
                components.hidden
              </span>
            </span>
            Hidden
          </a>
        </h2>

                  <div class="kss-description">
            <p>Hide elements from all users. Compare to the visually-hidden component.</p>
<p>Used for elements which should not be immediately displayed to any user. An
example would be a collapsible fieldset that will be expanded with a click
from a user.</p>
<p>For anything you want to hide on page load when JavaScript is enabled, use
the <code>.js-hidden</code> class.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div class="hidden ">
  This content is hidden.
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;hidden &quot;&gt;
  This content is hidden.
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/hidden/_hidden.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-highlight-mark" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-highlight-mark">
            <span class="kss-title__ref">
              4.7
              <span class="kss-title__permalink-hash">
                components.highlight-mark
              </span>
            </span>
            Highlight mark
          </a>
        </h2>

                  <div class="kss-description">
            <p>The &quot;new&quot; or &quot;updated&quot; marker. This is a very thin component. A front-end
developer may choose to delete this component and just style the <code>&lt;mark&gt;</code>
element directly.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <mark class="highlight-mark">New</mark>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;mark class=&quot;highlight-mark&quot;&gt;New&lt;/mark&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/highlight-mark/_highlight-mark.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-inline-links" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-inline-links">
            <span class="kss-title__ref">
              4.8
              <span class="kss-title__permalink-hash">
                components.inline-links
              </span>
            </span>
            Inline links
          </a>
        </h2>

                  <div class="kss-description">
            <p>A list of links that are inline with each other.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <ul class="inline-links ">
  <li class="inline-links__item"><a href="#">Read more</a></li>
  <li class="inline-links__item"><a href="#">Comment</a></li>
</ul>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;inline-links &quot;&gt;
  &lt;li class=&quot;inline-links__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Read more&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;inline-links__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Comment&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/inline-links/_inline-links.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-inline-sibling" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-inline-sibling">
            <span class="kss-title__ref">
              4.9
              <span class="kss-title__permalink-hash">
                components.inline-sibling
              </span>
            </span>
            Inline sibling
          </a>
        </h2>

                  <div class="kss-description">
            <p>An element that needs to appear inline with the content that follows.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <h4 class="inline-sibling ">A Heading</h4>
<p>A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h4 class=&quot;inline-sibling &quot;&gt;A Heading&lt;/h4&gt;
&lt;p&gt;A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/inline-sibling/_inline-sibling.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-messages" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-messages">
            <span class="kss-title__ref">
              4.10
              <span class="kss-title__permalink-hash">
                components.messages
              </span>
            </span>
            Messages
          </a>
        </h2>

                  <div class="kss-description">
            <p>System alerts.</p>
<p>Warning messages should use the <code>.messages--warning</code> class. Error messages
should use the <code>.messages--error</code> class.</p>
<p>The icon shown is not part of the CSS; it is an SVG image in the HTML.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div class="messages ">
  <h2 class="visually-hidden">Status message</h2>

  <div class="messages__icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
      <path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
    </svg>
  </div>

  This is how a single system message appears.
</div>

<div class="messages ">
  <h2 class="visually-hidden">Status message</h2>

  <div class="messages__icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
      <path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
    </svg>
  </div>

  <ul class="messages__list">
    <li class="messages__item">This is how multiple system messages appear.</li>
    <li class="messages__item">And this is another system message.</li>
    <li class="messages__item">Message received: <span class="messages__highlighted-text">Unknown input</span>.</li>
  </ul>
</div>

<div class="messages messages--warning ">
  <h2 class="visually-hidden">Warning message</h2>

  <div class="messages__icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
      <path d="M26,64l12,0c1.105,0 2,-0.895 2,-2l0,-9c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,9c0,1.105 0.895,2 2,2Z" fill="#000000"></path>
      <path d="M26,46l12,0c1.105,0 2,-0.895 2,-2l0,-42c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,42c0,1.105 0.895,2 2,2Z" fill="#000000"></path>
    </svg>
  </div>

  This is how a single warning message appears.
</div>

<div class="messages messages--error ">
  <h2 class="visually-hidden">Error message</h2>

  <div class="messages__icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
      <path d="M63.416 51.416c-0-0-0.001-0.001-0.001-0.001l-19.415-19.416 19.415-19.416c0-0 0.001-0 0.001-0.001 0.209-0.209 0.36-0.453 0.457-0.713 0.265-0.711 0.114-1.543-0.458-2.114l-9.172-9.172c-0.572-0.572-1.403-0.723-2.114-0.458-0.26 0.097-0.504 0.248-0.714 0.457 0 0-0 0-0.001 0.001l-19.416 19.416-19.416-19.416c-0-0-0-0-0.001-0.001-0.209-0.209-0.453-0.36-0.713-0.457-0.711-0.266-1.543-0.114-2.114 0.457l-9.172 9.172c-0.572 0.572-0.723 1.403-0.458 2.114 0.097 0.26 0.248 0.505 0.457 0.713 0 0 0 0 0.001 0.001l19.416 19.416-19.416 19.416c-0 0-0 0-0 0.001-0.209 0.209-0.36 0.453-0.457 0.713-0.266 0.711-0.114 1.543 0.458 2.114l9.172 9.172c0.572 0.572 1.403 0.723 2.114 0.458 0.26-0.097 0.504-0.248 0.713-0.457 0-0 0-0 0.001-0.001l19.416-19.416 19.416 19.416c0 0 0.001 0 0.001 0.001 0.209 0.209 0.453 0.36 0.713 0.457 0.711 0.265 1.543 0.114 2.114-0.458l9.172-9.172c0.572-0.572 0.723-1.403 0.458-2.114-0.097-0.26-0.248-0.504-0.457-0.713z" fill="#000000"></path>
    </svg>
  </div>

  This is how a single error message appears: <span class="messages__highlight">This is highlighted.</span>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;messages &quot;&gt;
  &lt;h2 class=&quot;visually-hidden&quot;&gt;Status message&lt;/h2&gt;

  &lt;div class=&quot;messages__icon&quot;&gt;
    &lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 64 64&quot;&gt;
      &lt;path d=&quot;M54 8l-30 30-14-14-10 10 24 24 40-40z&quot; fill=&quot;#000000&quot;&gt;&lt;/path&gt;
    &lt;/svg&gt;
  &lt;/div&gt;

  This is how a single system message appears.
&lt;/div&gt;

&lt;div class=&quot;messages &quot;&gt;
  &lt;h2 class=&quot;visually-hidden&quot;&gt;Status message&lt;/h2&gt;

  &lt;div class=&quot;messages__icon&quot;&gt;
    &lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 64 64&quot;&gt;
      &lt;path d=&quot;M54 8l-30 30-14-14-10 10 24 24 40-40z&quot; fill=&quot;#000000&quot;&gt;&lt;/path&gt;
    &lt;/svg&gt;
  &lt;/div&gt;

  &lt;ul class=&quot;messages__list&quot;&gt;
    &lt;li class=&quot;messages__item&quot;&gt;This is how multiple system messages appear.&lt;/li&gt;
    &lt;li class=&quot;messages__item&quot;&gt;And this is another system message.&lt;/li&gt;
    &lt;li class=&quot;messages__item&quot;&gt;Message received: &lt;span class=&quot;messages__highlighted-text&quot;&gt;Unknown input&lt;/span&gt;.&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class=&quot;messages messages--warning &quot;&gt;
  &lt;h2 class=&quot;visually-hidden&quot;&gt;Warning message&lt;/h2&gt;

  &lt;div class=&quot;messages__icon&quot;&gt;
    &lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 64 64&quot;&gt;
      &lt;path d=&quot;M26,64l12,0c1.105,0 2,-0.895 2,-2l0,-9c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,9c0,1.105 0.895,2 2,2Z&quot; fill=&quot;#000000&quot;&gt;&lt;/path&gt;
      &lt;path d=&quot;M26,46l12,0c1.105,0 2,-0.895 2,-2l0,-42c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,42c0,1.105 0.895,2 2,2Z&quot; fill=&quot;#000000&quot;&gt;&lt;/path&gt;
    &lt;/svg&gt;
  &lt;/div&gt;

  This is how a single warning message appears.
&lt;/div&gt;

&lt;div class=&quot;messages messages--error &quot;&gt;
  &lt;h2 class=&quot;visually-hidden&quot;&gt;Error message&lt;/h2&gt;

  &lt;div class=&quot;messages__icon&quot;&gt;
    &lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 64 64&quot;&gt;
      &lt;path d=&quot;M63.416 51.416c-0-0-0.001-0.001-0.001-0.001l-19.415-19.416 19.415-19.416c0-0 0.001-0 0.001-0.001 0.209-0.209 0.36-0.453 0.457-0.713 0.265-0.711 0.114-1.543-0.458-2.114l-9.172-9.172c-0.572-0.572-1.403-0.723-2.114-0.458-0.26 0.097-0.504 0.248-0.714 0.457 0 0-0 0-0.001 0.001l-19.416 19.416-19.416-19.416c-0-0-0-0-0.001-0.001-0.209-0.209-0.453-0.36-0.713-0.457-0.711-0.266-1.543-0.114-2.114 0.457l-9.172 9.172c-0.572 0.572-0.723 1.403-0.458 2.114 0.097 0.26 0.248 0.505 0.457 0.713 0 0 0 0 0.001 0.001l19.416 19.416-19.416 19.416c-0 0-0 0-0 0.001-0.209 0.209-0.36 0.453-0.457 0.713-0.266 0.711-0.114 1.543 0.458 2.114l9.172 9.172c0.572 0.572 1.403 0.723 2.114 0.458 0.26-0.097 0.504-0.248 0.713-0.457 0-0 0-0 0.001-0.001l19.416-19.416 19.416 19.416c0 0 0.001 0 0.001 0.001 0.209 0.209 0.453 0.36 0.713 0.457 0.711 0.265 1.543 0.114 2.114-0.458l9.172-9.172c0.572-0.572 0.723-1.403 0.458-2.114-0.097-0.26-0.248-0.504-0.457-0.713z&quot; fill=&quot;#000000&quot;&gt;&lt;/path&gt;
    &lt;/svg&gt;
  &lt;/div&gt;

  This is how a single error message appears: &lt;span class=&quot;messages__highlight&quot;&gt;This is highlighted.&lt;/span&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/messages/_messages.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-messages--color" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-messages--color">
            <span class="kss-title__ref">
              4.11
              <span class="kss-title__permalink-hash">
                components.messages--color
              </span>
            </span>
            Message colors
          </a>
        </h2>

                  <div class="kss-description">
            <p>Drupal system status reports use just the message colors and no other
styling.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <div class="[modifier class]">
  This is a system status report message.
</div>

          </div>

                      <div class="kss-modifier__name kss-style">
              .messages--ok-color
            </div>
            <div class="kss-modifier__description kss-style">
              &quot;Ok&quot; status.
            </div>
            <div class="kss-modifier__example">
              <div class="messages--ok-color">
  This is a system status report message.
</div>

            </div>
                      <div class="kss-modifier__name kss-style">
              .messages--warning-color
            </div>
            <div class="kss-modifier__description kss-style">
              Warning status.
            </div>
            <div class="kss-modifier__example">
              <div class="messages--warning-color">
  This is a system status report message.
</div>

            </div>
                      <div class="kss-modifier__name kss-style">
              .messages--error-color
            </div>
            <div class="kss-modifier__description kss-style">
              Error status.
            </div>
            <div class="kss-modifier__example">
              <div class="messages--error-color">
  This is a system status report message.
</div>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;[modifier class]&quot;&gt;
  This is a system status report message.
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/messages/_messages.scss</code>, line 14
        </div>
          </section>
          <section id="kssref-components-print-none" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-print-none">
            <span class="kss-title__ref">
              4.12
              <span class="kss-title__permalink-hash">
                components.print-none
              </span>
            </span>
            Do not print
          </a>
        </h2>

                  <div class="kss-description">
            <p>Removes an element from the print version of the web site.</p>
<p>By importing these CSS rules in a file marked as media &quot;all&quot;, we allow these
print rules to be aggregated with other stylesheets, for improved front-end
performance.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <p class="print-none">
  This item will not be printed.
</p>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;print-none&quot;&gt;
  This item will not be printed.
&lt;/p&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/print-none/_print-none.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-responsive-video" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-responsive-video">
            <span class="kss-title__ref">
              4.13
              <span class="kss-title__permalink-hash">
                components.responsive-video
              </span>
            </span>
            Responsive video
          </a>
        </h2>

                  <div class="kss-description">
            <p>Using a wrapper div, embedded videos can be made responsive so that their
intrinsic aspect ratio is preserved at any screen width. The
<code>responsive-video__embed</code> class is optional if the embed is an <code>iframe</code>.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <div class="responsive-video [modifier class]">
  <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
</div>

          </div>

                      <div class="kss-modifier__name kss-style">
              .responsive-video--4-3
            </div>
            <div class="kss-modifier__description kss-style">
              A video with a 4:3 aspect ratio instead of the default 16:9 one.
            </div>
            <div class="kss-modifier__example">
              <div class="responsive-video responsive-video--4-3">
  <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
</div>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;responsive-video [modifier class]&quot;&gt;
  &lt;iframe class=&quot;responsive-video__embed&quot; width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/8N_tupPBtWQ&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/responsive-video/_responsive-video.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-visually-hidden" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-visually-hidden">
            <span class="kss-title__ref">
              4.14
              <span class="kss-title__permalink-hash">
                components.visually-hidden
              </span>
            </span>
            Visually hidden
          </a>
        </h2>

                  <div class="kss-description">
            <p>Make an element visually hidden, but accessible to screen readers, etc.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <div class="visually-hidden [modifier class]">
  This text will be read by screen readers, but will be visually hidden.
</div>

          </div>

                      <div class="kss-modifier__name kss-style">
              .visually-hidden--off
            </div>
            <div class="kss-modifier__description kss-style">
              Turns off the visually-hidden effect.
            </div>
            <div class="kss-modifier__example">
              <div class="visually-hidden visually-hidden--off">
  This text will be read by screen readers, but will be visually hidden.
</div>

            </div>
                      <div class="kss-modifier__name kss-style">
              .visually-hidden--focusable
            </div>
            <div class="kss-modifier__description kss-style">
              Makes an element visually hidden by default, but visible when receiving focus.
            </div>
            <div class="kss-modifier__example">
              <div class="visually-hidden visually-hidden--focusable">
  This text will be read by screen readers, but will be visually hidden.
</div>

            </div>
                      <div class="kss-modifier__name kss-style">
              .visually-hidden--focusable:focus
            </div>
            <div class="kss-modifier__description kss-style">
              A focused, and visible, element.
            </div>
            <div class="kss-modifier__example">
              <div class="visually-hidden visually-hidden--focusable pseudo-class-focus">
  This text will be read by screen readers, but will be visually hidden.
</div>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;visually-hidden [modifier class]&quot;&gt;
  This text will be read by screen readers, but will be visually hidden.
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/visually-hidden/_visually-hidden.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-watermark" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-watermark">
            <span class="kss-title__ref">
              4.15
              <span class="kss-title__permalink-hash">
                components.watermark
              </span>
            </span>
            Watermark
          </a>
        </h2>

                  <div class="kss-description">
            <p>Make the element appear beneath sibling elements, like a watermark.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div>
  <mark class="watermark ">Unpublished</mark>

      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
  &lt;mark class=&quot;watermark &quot;&gt;Unpublished&lt;/mark&gt;

      &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/div&gt;
  &lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/watermark/_watermark.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-components-wireframe" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-components-wireframe">
            <span class="kss-title__ref">
              4.16
              <span class="kss-title__permalink-hash">
                components.wireframe
              </span>
            </span>
            Wireframe
          </a>
        </h2>

                  <div class="kss-description">
            <p>Add wireframes around main layout elements. <a href="http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain">Wireframes</a>
are useful when prototyping a website.</p>
<p>This design is not applied to the site unless you set the following Sass
variable: <code>$with-wireframes: true;</code></p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div class="wireframe">
  An item inside a wireframe.
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;wireframe&quot;&gt;
  An item inside a wireframe.
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>components/wireframe/_wireframe.scss</code>, line 3
        </div>
          </section>
  </article>

<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script>
  prettyPrint();
  var spy = new ScrollSpy('#kss-node', {
    nav: '.kss-nav__menu-child > li > a',
    className: 'is-in-viewport'
  });
</script>




<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
